<template>
  <div
    class="group-profile-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="group-profile-body">
      <!-- 集团简介 -->
      <div class="item-container profile">
        <div class="item-header"></div>
        <div class="item-body">
          <div class="desc" v-html="introductionDesc"></div>
          <div class="video">
            <video
              :src="introductionVideo"
              v-if="introductionVideo"
              ref="video"
              id="video"
              loop
              controls
              muted
            ></video>
            <!-- 暂停 -->
            <div
              class="play-btn pause"
              @click="playVideo(0)"
              v-if="videoStatus == 1"
            ></div>
            <!-- 播放 -->
            <div class="play-btn" @click="playVideo(1)" v-else></div>
          </div>
        </div>
      </div>

      <!-- 核心业务 -->
      <div class="item-container core-business">
        <div class="item-header"></div>
        <a-carousel autoplay>
          <div
            class="business-item"
            v-for="(item, index) in coreBusiness"
            :key="index"
          >
            <div class="business-item-body">
              <div class="business" v-for="v in item" :key="v.uuid">
                <div class="icon_bg"></div>
                <div
                  class="icon"
                  :style="{
                    background: `url(${getUrl(v.image)}) center center`,
                    backgroundSize: '100% 100%',
                  }"
                ></div>
                <div class="title">{{ v.name }}</div>
                <div class="desc">
                  {{ v.introduction }}
                </div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>

      <!-- 发展历程 -->
      <div class="item-container course">
        <div class="item-header"></div>
        <a-carousel autoplay>
          <div
            class="course-item"
            v-for="(item, index) in developCourse"
            :key="index"
          >
            <div class="course-item-body">
              <div class="course-card" v-for="v in item" :key="v.uuid">
                <div class="top">
                  <div class="img">
                    <img :src="getUrl(v.image)" alt="" />
                  </div>
                  <div class="title">
                    {{ v.introduction }}
                  </div>
                </div>
                <div class="bottom"></div>
                <div class="date">{{ v.name }}</div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>

      <!-- 企业文化 -->
      <div class="item-container culture">
        <div class="item-header"></div>
        <a-carousel autoplay>
          <div
            class="culture-item"
            v-for="(item, index) in firmCulture"
            :key="index"
          >
            <div class="culture-item-body">
              <div class="card" v-for="v in item" :key="v.uuid">
                <img :src="getUrl(v.image)" alt="" />
                <div class="card-body">
                  <div class="header">{{ v.name }}</div>
                  <div class="body">
                    <p
                      v-for="(t, idx) in v.introduction.split('&&&')"
                      :key="idx"
                    >
                      {{ t }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>

      <!-- 企业荣誉 -->
      <div class="item-container honor">
        <div class="item-header "></div>
        <a-carousel autoplay>
          <div
            class="carousel-item"
            v-for="(item, index) in firmHonor"
            :key="index"
          >
            <div class="carousel-item-body">
              <div class="honor-card" v-for="v in item" :key="v.uuid">
                <div class="img"><img :src="getUrl(v.image)" alt="" /></div>
                <div class="title">
                  {{ v.name }}
                </div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>

      <!-- 近期业绩 -->
      <div class="item-container performance">
        <div class="item-header"></div>
        <a-carousel autoplay>
          <div
            class="carousel-item"
            v-for="(item, index) in performance"
            :key="index"
          >
            <div class="carousel-item-body">
              <div class="performance-card" v-for="v in item" :key="v.uuid">
                <div class="img"><img :src="getUrl(v.image)" alt="" /></div>
                <div class="title">
                  {{ v.name }}
                </div>
                <div class="date">{{ v.moment }}</div>
                <!-- 蒙层 -->
                <div class="layer">
                  {{ v.introduction }}
                </div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>

      <!-- 联系我们 -->
      <div class="item-container contact">
        <div class="item-header"></div>
        <div class="item-body">
          <div class="map-container">
            <div id="amap"></div>
          </div>
          <div class="contact-details">
            <div class="contact-item">
              <div class="label">联系方式：</div>
              <div class="value">{{ organization.orgTelephone || "--" }}</div>
            </div>
            <div class="contact-item">
              <div class="label">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</div>
              <div class="value">{{ organization.orgPerson || "--" }}</div>
            </div>
            <div class="contact-item">
              <div class="label">公司邮箱：</div>
              <div class="value">{{ organization.orgEmail || "--" }}</div>
            </div>
            <div class="contact-item">
              <div class="label">公司地址：</div>
              <div class="value">{{ organization.orgAddress || "--" }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * @Description: 集团概述
 * @Author: zhailei
 *
 * **/
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "ecfcb87ee130b34b5f0d25862f5ef080",
};
export default {
  name: "GroupProfile",
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      aMap: null,
      dataResource: {},
      videoStatus: -1,
    };
  },
  computed: {
    //集团简介
    introductionDesc() {
      let { sysOrganization } = this.dataResource;
      return sysOrganization?.orgBriefIntroduction ?? {};
    },
    introductionVideo() {
      let { sysOrganization } = this.dataResource;
      let videoData = sysOrganization?.orgVideo ?? "[]";
      return this.getUrl(videoData);
    },

    //核心业务
    coreBusiness() {
      let { lygEnterpriseBusiScopes } = this.dataResource;
      return this.filterNum(lygEnterpriseBusiScopes ?? [], 4);
    },

    //发展历程
    developCourse() {
      let { LygEnterpriseDevelopHiss } = this.dataResource;
      return this.filterNum(LygEnterpriseDevelopHiss ?? [], 5);
    },

    //企业文化
    firmCulture() {
      let { lygEnterpriseCultures } = this.dataResource;
      return this.filterNum(lygEnterpriseCultures ?? [], 2);
    },

    //企业荣誉
    firmHonor() {
      let { lygEnterpriseHonors } = this.dataResource;
      return this.filterNum(lygEnterpriseHonors ?? [], 4);
    },

    //近期业绩
    performance() {
      let { lygEnterpriseBusiPerformances } = this.dataResource;
      return this.filterNum(lygEnterpriseBusiPerformances ?? [], 4);
    },

    //近期业绩
    organization() {
      let { sysOrganization } = this.dataResource;
      return sysOrganization ?? {};
    },
  },
  mounted() {
    this.$nextTick((_) => {
      this.initMap();
      setTimeout(() => {
        const videoElement = document.getElementById("video");
        videoElement.addEventListener("play", () => {
          this.videoStatus = 1;
        });
        videoElement.addEventListener("pause", () => {
          this.videoStatus = 0;
        });
      }, 1000);
    });
    this.getData();
  },
  methods: {
    //查询数据
    getData() {
      this.$get(
        `/mdata/organization/getDetail?orgId=1F6A965B4E7D4A1D8CE6758ABB6C8D9D`
      )
        .then((res) => {
          let { data } = res;
          this.dataResource = data;
        })
        .catch((_) => {
          this.dataResource = {};
        })
        .finally((_) => {});
    },

    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },

    //初始化地图服务
    initMap() {
      AMapLoader.load({
        key: "4a9b32384ac2ef8437f61e2357874137", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.MouseTool",
          "AMap.MapType",
          "AMap.HawkEye",
          "AMap.Geolocation",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.amap = new AMap.Map("amap", {
            //设置地图容器id
            viewMode: "2D", //是否为3D地图模式
            zoom: 20, //初始化地图级别
            center: [119.37094691782585, 34.74193028641671], //初始化地图中心点位置
            resizeEnable: true,
          });
          // 创建一个 icon
          let Icon = new AMap.Icon({
            size: new AMap.Size(30, 38),
            image:
              "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            imageSize: new AMap.Size(30, 38),
          });
          let marker = new AMap.Marker({
            icon: Icon,
            position: [119.37094960003486, 34.74186085899742],
            offset: new AMap.Pixel(-14, -34),
          });
          marker.setLabel({
            direction: "right",
            offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
            content:
              "<div class='marker-info'>连云港港口控股集团有限公司</div>", //设置文本标注内容
          });
          marker.setMap(this.amap);
          this.amap.on("click", (res) => {
            console.log(res);
          });
        })
        .catch((e) => {
          // console.log(e);
        });
    },

    //数组分割
    filterNum(arr = [], number) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        newArr.push(arr.slice(i, (i += number)));
      }
      return newArr;
    },

    //视频播放
    playVideo(type = 1) {
      let videoDom = this.$refs["video"];
      this.videoStatus = type;
      if (type == 1) {
        videoDom.play();
      } else {
        videoDom.pause();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.group-profile-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 128px 0 30px 0;
  /deep/.amap-marker-label {
    border: none;
    padding: 0;
    .marker-info {
      color: #333;
      font-weight: bold;
      font-size: 14px;
      top: -20px;
      position: absolute;
      padding: 10px 20px;
      background: #fff;
      top: -60px;
      left: 50%;
      transform: translateX(-60%);
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
  }

  .group-profile-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .custom-scrollbar();
    .item-container {
      width: 1200px;
      .item-header {
        margin-bottom: 26px;
        width: 100%;
        height: 60px;
      }
      .item-body {
        display: flex;
      }

      &:not(:last-child) {
        padding-bottom: 60px;
      }
      /deep/.ant-carousel {
        .slick-dots {
          button {
            // opacity: 1;
            // background: rgba(0, 144, 255, 0.3);
          }
          .slick-active {
            button {
              //   background: #0090ff;
            }
          }
        }
      }

      //集团简介
      &.profile {
        .item-header {
          background: url("~@/assets/img/portalEntry/title_1.png");
          background-size: 100% 100%;
        }
        .item-body {
          height: 336px;
        }
        .desc {
          flex: 1;
          margin-right: 24px;
          .custom-scrollbar();
          padding-right: 9px;
          height: 100%;
          color: #b8e8ff;
          font-size: 16px;
          line-height: 32px;
        }
        .video {
          flex-shrink: 0;
          width: 596px;
          height: 100%;
          background: #000;
          position: relative;
          .play-btn {
            position: absolute;
            width: 48px;
            height: 48px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            background: url("~@/assets/img/portalEntry/playBtn.png");
            background-size: 100% 100%;
            &.pause {
              background: url("~@/assets/img/portalEntry/pauseBtn.png");
              background-size: 100% 100%;
              opacity: 0;
              transition: 0.3s;
            }
          }
          &:hover {
            .pause {
              opacity: 1;
            }
          }
          video {
            width: 100%;
            height: 100%;
          }
        }
      }

      //核心业务
      &.core-business {
        .item-header {
          background: url("~@/assets/img/portalEntry/title_2.png");
          background-size: 100% 100%;
        }
        /deep/.ant-carousel {
          .business-item {
            height: 418px;
            .business-item-body {
              width: 100%;
              height: 380px;
              display: flex;
            }
          }
        }
        .business {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 282px;
          height: 100%;
          box-sizing: border-box;
          padding: 4px 22px 0 22px;
          background: url("~@/assets/img/portalEntry/core_bg.png");
          background-size: 100% 100%;
          color: #b8e8ff;
          line-height: 30px;
          font-size: 16px;
          position: relative;
          &:not(:first-child) {
            margin-left: 24px;
          }
          .icon_bg {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: url("~@/assets/img/portalEntry/core_icon.png");
            background-size: 100% 100%;
            animation: rotateAni 10s linear infinite;
          }
          .icon {
            position: absolute;
            width: 96px;
            height: 96px;
            top: 21px;
            left: 93px;
            overflow: hidden;
            border-radius: 50%;
          }
          &.business_1 {
            .icon {
              background: url("~@/assets/img/portalEntry/core_1.png");
              background-size: 100% 100%;
            }
          }
          &.business_2 {
            .icon {
              background: url("~@/assets/img/portalEntry/core_2.png");
              background-size: 100% 100%;
            }
          }
          &.business_3 {
            .icon {
              background: url("~@/assets/img/portalEntry/core_3.png");
              background-size: 100% 100%;
            }
          }
          &.business_4 {
            .icon {
              background: url("~@/assets/img/portalEntry/core_4.png");
              background-size: 100% 100%;
            }
          }
          .title {
            color: #e2fcff;
            font-size: 24px;
            padding-top: 20px;
            padding-bottom: 50px;
          }
        }
      }

      //发展历程
      &.course {
        .item-header {
          background: url("~@/assets/img/portalEntry/title_3.png");
          background-size: 100% 100%;
        }
        /deep/.ant-carousel {
          .course-item {
            height: 248px;
            .course-item-body {
              width: 100%;
              height: 210px;
              display: flex;
              .course-card {
                width: 240px;
                height: 100%;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                &:first-child {
                  .bottom {
                    background: url("~@/assets/img/portalEntry/course_1.png");
                    background-size: 100% 100%;
                  }
                }
                .top {
                  flex: 1;
                  position: relative;
                  padding-left: 22px;
                  box-sizing: border-box;
                  padding-right: 36px;
                  &::before {
                    content: "";
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: #07c9f0;
                    border-radius: 50%;
                    top: 2px;
                    left: 7px;
                  }
                  &::after {
                    content: "";
                    position: absolute;
                    width: 2px;
                    background: #07c9f0;
                    height: 152px;
                    left: 10px;
                    bottom: 0;
                  }
                  .img {
                    width: 138px;
                    height: 81px;
                    background: rgba(0, 144, 255, 0.3);
                    border: 1px solid rgba(0, 255, 255, 0.3);
                    margin-bottom: 6px;
                    overflow: hidden;
                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                    }
                  }
                  .title {
                    overflow: hidden;
                    max-height: 60px;
                    color: #b8e8ff;
                    font-size: 14px;
                  }
                }
                .bottom {
                  height: 12px;
                  background: url("~@/assets/img/portalEntry/course_2.png");
                  background-size: 100% 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  &::before {
                    content: "";
                    display: flex;
                    width: 8px;
                    height: 8px;
                    background: #ffffff;
                    border-radius: 50%;
                  }
                }
                .date {
                  color: #00ffff;
                  font-size: 18px;
                  text-align: center;
                  padding-top: 10px;
                }
              }
            }
          }
        }
      }
      //企业文化
      &.culture {
        position: relative;
        .item-header {
          background: url("~@/assets/img/portalEntry/title_4.png");
          background-size: 100% 100%;
        }
        .item-body {
          height: 284px;
          justify-content: space-between;
        }

        /deep/.ant-carousel {
          .culture-item {
            height: 321px;
            .culture-item-body {
              width: 100%;
              height: 284px;
              display: flex;
              justify-content: space-between;
              overflow: hidden;
            }
          }
        }
        .card {
          width: 584px;
          height: 100%;
          //   background: url("~@/assets/img/portalEntry/culture_bg.png");
          //   background-size: cover;
          border-radius: 10px;
          color: #fff;
          font-size: 18px;
          overflow: hidden;
          position: relative;
          img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
          }
          .card-body {
            box-sizing: border-box;
            padding: 30px 100px 0 40px;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              0deg,
              rgba(12, 154, 182, 0.54),
              #0c9ab6
            );

            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
          }
          .header {
            margin-bottom: 26px;
            font-size: 30px;
            padding-bottom: 10px;
            position: relative;
            &::after {
              content: "";
              display: flex;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 32px;
              height: 2px;
              background: #ffc21f;
            }
          }
          .item {
            display: flex;
            &:not(:last-child) {
              margin-bottom: 20px;
            }
            .label {
              flex-shrink: 0;
            }
            .value {
              span {
                white-space: nowrap;
                &:not(:last-child) {
                  margin-right: 16px;
                }
              }
            }
          }
        }
      }
      //企业荣誉
      &.honor {
        .item-header {
          background: url("~@/assets/img/portalEntry/title_5.png");
          background-size: 100% 100%;
        }
        /deep/.ant-carousel {
          .carousel-item {
            height: 270px;
            .carousel-item-body {
              width: 100%;
              height: 232px;
              display: flex;
            }
            .honor-card {
              width: 282px;
              height: 100%;
              border: 1px solid #00d5ff;
              display: flex;
              flex-direction: column;
              box-sizing: border-box;
              padding: 5px;
              &:not(:first-child) {
                margin-left: 24px;
              }
              .img {
                flex: 1;
                height: 186px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .title {
                flex-shrink: 0;
                height: 32px;
                background: rgba(0, 213, 255, 0.3);
                color: #b8e8ff;
                font-size: 16px;
                margin-top: 4px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 32px;
                text-align: center;
                padding: 0 14px;
              }
            }
          }
        }
      }
      //近期业级
      &.performance {
        .item-header {
          background: url("~@/assets/img/portalEntry/title_6.png");
          background-size: 100% 100%;
        }
        /deep/.ant-carousel {
          .carousel-item {
            height: 366px;
            .carousel-item-body {
              width: 100%;
              height: 328px;
              display: flex;
              //   justify-content: space-between;
              .performance-card {
                width: 282px;
                height: 100%;
                border: 1px solid #00b5d9;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                border-radius: 10px;
                background: rgba(0, 181, 217, 0.4);
                color: #fff;
                font-size: 18px;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                margin-left: 24px;
                .img {
                  width: 100%;
                  height: 216px;
                  border-radius: 10px 10px 0px 0px;
                  margin-bottom: 10px;
                  overflow: hidden;
                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }
                .title {
                  padding: 0 20px;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                }
                .date {
                  margin-top: 10px;
                  padding: 0 20px;
                  color: #b8e8ff;
                  font-size: 14px;
                }
                &:hover {
                  .layer {
                    top: 0;
                  }
                }
                .layer {
                  .custom-scrollbar();
                  transition: 0.3s;
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 100%;
                  left: 0;
                  padding: 70px 20px 20px 20px;
                  box-sizing: border-box;
                  color: #fff;
                  line-height: 36px;
                  display: flex;
                  align-items: center;
                  background: linear-gradient(
                    0deg,
                    rgba(1, 97, 128, 0.95),
                    rgba(0, 181, 217, 0.55)
                  );
                }
              }
            }
          }
        }
      }
      //联系我们
      &.contact {
        .item-header {
          background: url("~@/assets/img/portalEntry/title_7.png");
          background-size: 100% 100%;
        }
        .item-body {
          .map-container {
            width: 596px;
            height: 280px;
            border-radius: 10px;
            background: #fff;
            margin-right: 24px;
            overflow: hidden;

            #amap {
              width: 100%;
              height: 100%;
            }
          }
          .contact-details {
            display: flex;
            flex: 1;
            height: 280px;
            flex-direction: column;
            justify-content: center;
            .contact-item {
              display: flex;
              align-items: center;
              height: 40px;
              background: linear-gradient(
                to right,
                rgba(7, 201, 240, 0.5) 0%,
                rgba(7, 201, 240, 0) 25%,
                rgba(7, 201, 240, 0) 100%
              );
              padding: 0 16px;
              color: #b8e8ff;
              font-size: 16px;
              &:not(:last-child) {
                margin-bottom: 24px;
              }
              .value {
                color: #00ffff;
              }
              &::before {
                content: "";
                width: 18px;
                height: 20px;
                margin-right: 18px;
              }
              &:nth-child(1) {
                &::before {
                  background: url("~@/assets/img/portalEntry/contact_1.png");
                  background-size: 100% 100%;
                }
              }
              &:nth-child(2) {
                &::before {
                  background: url("~@/assets/img/portalEntry/contact_2.png");
                  background-size: 100% 100%;
                }
              }
              &:nth-child(3) {
                &::before {
                  background: url("~@/assets/img/portalEntry/contact_3.png");
                  background-size: 100% 100%;
                }
              }
              &:nth-child(4) {
                &::before {
                  background: url("~@/assets/img/portalEntry/contact_4.png");
                  background-size: 100% 100%;
                }
              }
            }
          }
        }
        // <div class="item-body">
        //   <div class="map-container"></div>
        //   <div class="contact-details">
        //     <div class="contact-item">
        //       <div class="label">联系方式：</div>
        //       <div class="value">400-0518-999</div>
        //     </div>
        //     <div class="contact-item">
        //       <div class="label">联系人：</div>
        //       <div class="value">陈晓明</div>
        //     </div>
        //     <div class="contact-item">
        //       <div class="label">公司邮箱：</div>
        //       <div class="value">998866lyg.jszgjsjt.com</div>
        //     </div>
        //     <div class="contact-item">
        //       <div class="label">公司地址：</div>
        //       <div class="value">连云港市连云区中华西路18号</div>
        //     </div>
        //   </div>
        // </div>
      }
    }
  }

  @keyframes rotateAni {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    overflow-x: overlay !important;
    overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.6);
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.1);
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none;
    }
  }
}
</style>
